<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <table-list
          :tableData="tableData"
          :listHeader="listHeader"
          @operate="operate"
          :type="type"
        ></table-list>
        <!-- 分页 -->
        <!-- <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>-->
      </div>
    </div>

    <!-- 弹出详情 -->
    <el-dialog title="添加菜单" :visible.sync="dialogTableVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级菜单">
          <el-input v-model="ruleForm.superior_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="菜单标题" prop="name">
          <el-input v-model="ruleForm.name" @blur="ruleForm.name = publick.clearinput(ruleForm.name)"></el-input>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="ruleForm.url_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('ruleForm')"
            >立即添加</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog title="修改角色" :visible.sync="dialogTableVisibles">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单标题" prop="name">
          <el-input v-model="ruleForm.name" @blur="ruleForm.name = publick.clearinput(ruleForm.name)"></el-input>
        </el-form-item>
        <!-- 显示状态 -->
        <el-form-item label="显示状态">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            active-value="1"
            inactive-value="0"
            active-text="已启用"
            inactive-text="已禁用"
            @change="change()"
          ></el-switch>
        </el-form-item>
        <el-form-item label="排列序数">
          <el-input type="number" v-model="sort" max="99" min="1"></el-input>
        </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确认修改</el-button
        >
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../components/List/TableList";
// import PagingList from "../components/List/PagingList";
export default {
  data() {
    return {
      tableData: [], //列表数据
      sort: "", //序数
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "menulist", //列表类型
      ruleForm: {
        name: "", //菜单名
        superior_name: "", //上级菜单名
        url_name: "" //路由地址
      },
      rules: {
        name: [
          { required: true, message: "请输入一个菜单名称", trigger: "change" }
        ]
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      value: "", //显示状态
      is_change: false //判断状态是否改变过
    };
  },
  components: {
    TableList
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.menuAdminList();
    let header_name = ["菜单名称", "菜单地址", "状态", "排序"]; //列表头部
    let list_content = ["name", "url", "status", "sort"]; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //获取后台菜单列表
    menuAdminList() {
      this.$api
        .menuAdminList({
          token: this.publick.token()
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //按钮变换
    change() {
      this.is_change = true;
    },
    //获取菜单列表
    menus() {
      this.$api
        .getmenulist({
          token: this.publick.token()
        })
        .then(res => {
          console.log(res);
          localStorage.setItem("menus", JSON.stringify(res.data)); //菜单数据
          this.$router.go(0);
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "addup") {
        //    向下添加
        if (this.datas.id == 1) {
          //首页不可添加下级
          this.$message({
            message: "首页不可添加下级",
            type: "warning"
          });
        } else {
          this.dialogTableVisible = true;
          this.ruleForm.superior_name = this.datas.name;
          this.ruleForm.name = "";
        }
        console.log(this.datas);
      } else if (this.datas.type == "delect") {
        // 删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api
              .menuAdminDel({
                token: this.publick.token(),
                id: this.datas.id
              })
              .then(res => {
                console.log(res);
                this.$message({
                  type: "success",
                  message: res.message
                });
                this.menuAdminList();
              })
              .catch(res => {
                console.log(res);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (this.datas.type == "amend") {
        // 修改
        console.log(this.datas);
        this.ruleForm.name = this.datas.name;
        this.ruleForm.url_name = this.datas.path;
        if (this.datas.status == "已启用") {
          this.value = 1 + "";
        } else {
          this.value = 0 + "";
        }
        this.dialogTableVisibles = true;
        this.sort = this.datas.sort;
      }
    },
    //提交修改
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          this.$api
            .menuAdminSave({
              token: this.publick.token(),
              menu_name: this.ruleForm.name,
              is_show: this.value,
              id: this.datas.id,
              sort: this.sort
            })
            .then(res => {
              console.log(res);
              this.$message({
                message: res.message,
                type: "success"
              });
              this.menuAdminList();
              if (this.is_change) {
                this.menus();
                this.change = false;
              }
            })
            .catch(res => {
              console.log(res);
            });
          //提交修改成功后执行
          this.$refs[formName].resetFields();
          this.dialogTableVisibles = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加菜单
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("123");
          //添加菜单成功后执行
          this.$refs[formName].resetFields();
          this.dialogTableVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  watch: {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow-y: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
</style>